<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gramedia Writing Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <link href="css/tooltip.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="img/icon.png">
  
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/css-pop.js"></script>
    
</head>

<body id="body">
<div class="container shadow">
	<div class="row clearfix">
		<div class="col-md-12 column"><!-- untuk iklan di atas header -->
        	<img src="img/1bfdf7e9746c4dd82708fac53e91967e.jpg" style="width:100%; height:50px;"/>
		</div>
	</div>
	<div class="row clearfix colorheader"><!-- untuk menu -->
		<div class="col-md-2 column logo">
			<img src="img/Logo GRP.jpg" />
		</div>
        <div class="col-md-10 column padd3" style="padding-right:14px;">
        	<nav class="navbar navbar-default navbar-static-top navbar-inverse header" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="index2.html">Discover</a>
						</li>
                        <li>
							<a href="#">Event</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Panduan<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
                                <li>
									<a href="#">Another action</a>
								</li>
                                <li>
									<a href="#">Something else here</a>
								</li>
								<li>
									<a href="#">Separated link</a>
								</li>
								<li>
									<a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input class="form-control tinggitextbox" type="text">
						</div> <button type="submit" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-search"></span></button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="tulis cerita.html">Tulis Cerita</a>
						</li>
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Jessyca<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="profilku.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Profil</a>
								</li>
								<li>
									<a href="daftar cerita.html"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;Daftar Cerita</a>
								</li>
								<li>
									<a href="draft cerita.html"><span class="glyphicon glyphicon-edit"></span>&nbsp;&nbsp;Draft Cerita</a>
								</li>
								<li>
									<a href="koleksiku.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Koleksiku</a>
								</li>
                                <li>
									<a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Logout</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
    
    <!-- start untuk content -->
	<div class="row clearfix">
    <div class="col-md-12 column content">
	<div class="row clearfix">
		<div class="col-md-3 column" ><!-- untuk kolom pertama -->
        	<div class="panel-group" id="panel-661231">
				<div class="panel panel-default padd4">
					<div class="hr3">
                    <span class="glyphicon glyphicon-bookmark"></span>
                      Cover
                    </div>
                    <hr class="hr2"/>
                    <img src="img/img9.jpg".jpg"  class="img-thumbnail fotoprofil2">
                    <br/>
                    <br/>
                    <div class="list-group-item" style="border-left:none; border-right:none;">
						<table>
                        	<tr>
                            	<td class="kolom1">author</td>
                                <td>:</td>
                                <td class="kolom2">Jeanne R</td>
                            </tr>
                        </table>
                    </div> 
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <table>
                        	<tr>
                            	<td class="kolom1">create</td>
                                <td>:</td>
                                <td class="kolom2">Jeanne R</td>
                            </tr>
                        </table>
                    </div> 
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <table>
                        	<tr>
                            	<td class="kolom1">update</td>
                                <td>:</td>
                                <td class="kolom2">Jeanne R</td>
                            </tr>
                        </table>
                    </div> 
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <table>
                        	<tr>
                            	<td class="kolom1">vote cerita</td>
                                <td>:</td>
                                <td class="kolom2">
                                	<span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star-empty"></span>
                                    <span class="glyphicon glyphicon-star-empty"></span>
                                </td>
                            </tr>
                        </table>
                    </div> 
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <table>
                        	<tr>
                            	<td class="kolom1">vote author</td>
                                <td>:</td>
                                <td class="kolom2">
                                	<span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star-empty"></span>
                                </td>
                            </tr>
                        </table>
                    </div> 
                    <div class="list-group-item" style="border-left:none; border-right:none;">
                        <button type="button" class="btn">Jadikan Koleksi</button>
                    </div> 
				</div>		
			</div>
            <br/>
		</div>
        
		<div class="col-md-9 column" > <!-- untuk kolom kedua yang dibagi 2 -->
			<div class="row clearfix">
				<div class="col-md-12 column">
                	<!-- start cerita -->
                    <div>
                        <br/>
                        <h9>
                            laskar pelangi
                        </h9>
                        <hr/>
                        <table style="width:100%">
                            <tr>
                                <td style="width:30%">
                                    <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                                        <strong>&nbsp;&nbsp;<span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;&nbsp;Silahkan pilih BAB&nbsp;&nbsp;&nbsp;&nbsp;</strong>
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                                        <li role="presentation" class="divider"></li>
                                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                                      </ul>
                                    </div>
                                </td>
                                <td style="width:17%"></td>
                                <td style="width:5%">
                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
                                </td>
                                <td style="width:0.8%"><input class="form-control pagebuku font10" id="inputPassword3" type="text" value="1 of 100"></td>
                                <td style="width:6%">
                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward"></span></button>
                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
                                </td>
                            </tr>
                        </table>
                        
                        <br/>
                        <div id="paper"></div>
                        <div id="page">
                        <p class="paragrafcerita">
                            Setiap melihat kepompong di daun palem di teras rumahku aku selalu ingat
        kata-kata kekasihku: kita, kau dan aku, adalah kepompong, yang menunggu waktu untuk lepas dari bungkusnya dan terbang menjadi kupu-kupu, belalang, atau mungkin burung jiwa.
        "Aku lebih suka kupu-kupu. Dengan sayap-sayap bercahaya kita akan terbang ke langit," ujar kekasihku, penuh imajinasi..
        Tetapi, aku merasa terlalu lama jiwaku tidur di dalam kepompong itu, entah berapa abad. Namun, kekasihku yakin, makin lama kita bersemayam di dalamnya, akan makin matanglah jiwa kita, dan makin perkasa pula raga kita. "Kalau kau jadi kupu-kupu, kau akan jadi kupu-kupu yang kuat. Kalau kau jadi belalang, akan jadi belalang yang perkasa," katanya.
        Tapi, bagaimana kalau kita tidak menjadi apa-apa, atau bahkan mati di dalam kepompong itu, karena tidak punya kekuatan lagi untuk melepaskan diri dari kungkungan derita. "Ah tidak. Kita sedang berproses," katanya. "Kita harus jalani proses itu untuk menjadi."
        Untuk menjadi? Menjadi apa? Aku tidak tahu jawabannya, sebab aku tidak punya cita-cita. 
                        </p>
                        <p class="paragrafcerita">
                        Aku ingin hidup mengalir saja bagai air, berembus bagai angin, menyebar bagai pasir, meresap bagai garam, menyusup bagai rumput-rumput jiwa.
        Tetapi, seperti kata kekasihku, aku jalani juga hidupku sebagai proses proses untuk menjadi. Aku jalani hari-hari manis, juga hari-hari pahit, bersama orang-orang yang bersentuhan denganku, bersama jiwa-jiwa yang bersedia berbagi. Kuliah, pacaran, bekerja, membangun karier, bertahun-tahun, berabad-abad, sampai serasa lumutan.
        Tapi, aku sungguh tidak tahan menghadapi tahapan membujang terlalu lama takut menjadi bujang lapuk. Maka, aku pun menikah begitu menemukan gadis yang aku sukai dan bersedia berbagi meskipun lebih banyak berbagi duka sebelum kuntuntaskan cintaku padanya. Sementara, kekasihku begitu tahan menjalani tahapan itu, membujang begitu lama, setidaknya sampai kami bertemu lagi di Jakarta.
                        </p>
                        
                        </div>
                    </div>
              
                    <br/>
                    <ul class="pagination pagination-sm">
                        <li>
                            <a href="#">Prev</a>
                        </li>
                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#">Next</a>
                        </li>
                    </ul>
                   
                    <div class="clearfix"></div>
                    <hr/>
                   	<div class="font10 abu"><span class="glyphicon glyphicon-heart-empty"></span>&nbsp;&nbsp;&nbsp;12.989 suka&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;&nbsp;1.989 komentar</div>
                    <br/>
                    <button type="button" class="btn btn-danger "><span class="glyphicon glyphicon-heart-empty"></span> &nbsp;suka</button>
                    <button type="button" class="btn btn-danger "><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;komentari</button>
                    <button type="button" class="btn btn-danger "><span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;vote cerita</button>
                    <button type="button" class="btn btn-danger "><span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;vote author</button>
                    <div class="clearfix"></div>
                    <br/>
                    <h9>komentar :</h9>
                    <div class="media well">
                         <a href="#" class="pull-left"><img src="img/foto suri.jpg" class="media-object fotocomment" /></a>
                        <div class="media-body">
                            <div class="coment">
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                            </div>
                            <div class="font2">19 jam lalu | <label>5 suka</label>&nbsp;|&nbsp;<span class="glyphicon glyphicon-heart-empty"></span> </div>
                            <div class="media">
                                 <a href="#" class="pull-left"><img src="img/foto suri.jpg" class="media-object fotocomment" /></a>
                                <div class="media-body coment">
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                </div>
                                <div class="font2">19 jam lalu | <label>5 suka</label>&nbsp;|&nbsp;<span class="glyphicon glyphicon-heart-empty"></span></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="media well">
                         <a href="#" class="pull-left"><img src="img/foto suri.jpg" class="media-object fotocomment" /></a>
                        <div class="media-body">
                            <div class="coment">
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                            </div>
                            <div class="font2">19 jam lalu | <label>5 suka</label>&nbsp;|&nbsp;<span class="glyphicon glyphicon-heart-empty"></span></div>
                            <div class="media">
                                 <a href="#" class="pull-left"><img src="img/foto suri.jpg" class="media-object fotocomment" /></a>
                                <div class="media-body coment">
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                </div>
                                <div class="font2">19 jam lalu | <label>5 suka</label>&nbsp;|&nbsp;<span class="glyphicon glyphicon-heart-empty"></span></div>
                            </div>
                            <div class="media">
                                 <a href="#" class="pull-left"><img src="img/foto suri.jpg" class="media-object fotocomment" /></a>
                                <div class="media-body coment">
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                                </div>
                                <div class="font2">19 jam lalu | <label>5 suka</label>&nbsp;|&nbsp;<span class="glyphicon glyphicon-heart-empty"></span></div>
                            </div>
                        </div>
                    </div>
            		<ul class="pagination pagination-sm padd8">
                        <li>
                            <a href="#">Prev</a>
                        </li>
                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#">Next</a>
                        </li>
                    </ul>
                    <!-- stop cerita -->
                </div>
            </div>
		</div>
    </div>
	<!-- end untuk content -->
	
    <!-- untuk iklan -->
	<div class="row clearfix">
		<div class="col-md-12 column">
		</div>
	</div>
    
    <!-- untuk footer -->
    <br/>
	<div class="row clearfix">
		<div class="col-md-12 column" style="min-height:60px; background-color:#333333; padding-top:10px; font-size:12px">
        	<table style="width:100%; color:#CCCCCC; padding-top:15px; padding-bottom:15px;">
            	<tr>
                	<td>Copyright @Gramedia 2014</td>
                    <td style="border-left:thin solid #919191; width:20%; padding-right:70px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;Join Us :</strong><br/>
                    	<div class="col-md-3"><img src="img/facebook-icon.png" /></div>
                        <div class="col-md-3"><img src="img/google-plus-icon.png" /></div>
                        <div class="col-md-3"><img src="img/twitter-icon.png" /></div>
                        <div class="col-md-3"><img src="img/blogger-icon.png" /></div>
                    </td>
                </tr>
            </table>
            <br/>
		</div>
	</div>
</div>
</div> 
<!-- start pop up daftar email -->
                     <div id="blanket" style="display:none; "></div>
                     <div id="popUpDiv" style="display:none; background-color:#FFFFFF; width:50%;">
                        <div>
                        	<h8 class="judulprofil">Daftar Alamat Email</h8>
                            <div class="hr5"></div>
                            <br/>
                        	<div class="col-xs-8" style="padding-left:0;">
                                <div class="input-group input-group-sm">
                                  <span class="input-group-addon">Cari Email</span>
                                  <input type="text" class="form-control" >
                                </div>
                            </div>
                            <button type="button" class="btn btn-default tombolcari tinggitextbox tooltip-bottom" data-tooltip="cari"><span class="glyphicon glyphicon-search"></span></button>
                            <br/>
                            <br/>
                            <div style="border:thin solid #999999; padding:5px; background-color:#CCCCCC"
                            <br/>
                            <div class="row clearfix">
								<div class="col-md-6 column">
                                		<div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Rebecca
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                </div>
                                <div class="col-md-6 column">
                                		<div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Rebecca
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Jessica
                                          </label>
                                        </div>
                                        <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Claudia
                                          </label>
                                        </div>
                                </div>
                                <ul class="pagination pagination-sm padd8">
                                    <li>
                                        <a href="#">Prev</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li>
                                        <a href="#">Next</a>
                                    </li>
                            </ul>
                            </div>
                            <br/>
                            </div>
                            <br/>
                            <button type="submit" class="btn btn-danger btn-sm">Pilih</button>
                            <button type="submit" class="btn btn-danger btn-sm" onClick="popup('popUpDiv')">Batal</button>
                            <br/>
                            <br/>
                     </div>
                     <!-- end pop up form -->
</body>
</html>
